@charset "UTF-8";
.dh-tabs,.thumimg-tag {
    -webkit-user-select:none
}
.m-indexDetail,
.m-indexMain {
    background-color:#fafafa
}
.m-indexDetail *,
.m-indexMain * {
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.f-arrow-right:after {
    content:" >";
    font-family:simsun,serif
}
.u-mtitle {
    height:auto
}
.u-mtitleBtn {
    display:inline-block;
    border:solid #09924b;
    border-width:2px 4px 1px;
    -webkit-border-radius:5px;
    border-radius:5px;
    background-color:#09924b;
    color:#fff
}
.u-index-more {
    padding-top:15px
}
.u-index-more a,
.u-openSpeciaItem:hover .osiTitle,
.u-openVideoItem:hover .oviTitle,
.u-votebtn a {
    color:#09924b
}
.m-categoryIndex a:hover,
.u-index-more a:hover {
    text-decoration:underline
}
.u-index-refreshBtn {
    display:inline-block;
    margin-left:.5em
}
.u-index-refreshBtn:after {
    content:" ";
    position:relative;
    top:-.15em;
    float:right;
    width:14px;
    height:14px;
    margin-left:.5em;
    background:url(https://open-image.ws.126.net/open-pc/images/refreshBtnIcon-c2f43e78da.png) center no-repeat
}
.u-index-refreshBtn:hover:after {
    -webkit-transform:rotate(-180deg);
    transform:rotate(-180deg);
    -webkit-transition:.5s;
    transition:.5s
}
.u-index-refreshBtn:active:after {
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-transition:none;
    transition:none
}
.m-openSpecial {
    padding-top:30px;
    margin-bottom:50px
}
.u-openSpeciaItem {
    width:219px;
    margin-left:28px
}
.home-activity-discount a:nth-of-type(4n+1),
.m-openGYLList .u-openVideoItem:first-child,
.u-openSpeciaItem:first-child {
    margin-left:0
}
.u-openSpeciaItem .osiTag,
.u-openVideoItem .oviTag {
    z-index:10;
    padding:0 .5em;
    line-height:22px;
    background-color:#09924b
}
.u-openSpeciaItem .osiImg {
    -webkit-transition:.5s;
    transition:.5s;
    height:123px
}
.u-openSpeciaItem .osiImg img,
.u-openVideoItem .oviImg img {
    display:block;
    width:100%;
    -webkit-transition:.5s cubic-bezier(0,.6,.3,1);
    transition:.5s cubic-bezier(0,.6,.3,1)
}
.u-openSpeciaItem .osiTitle {
    font-size:18px;
    margin-top:1em;
    line-height:1em;
    white-space:nowrap;
    -webkit-transition:.25s;
    transition:.25s
}
.u-openSpeciaItem .osiSubtitle {
    display:none;
    padding:0 .5em;
    color:#09924b;
    border:1px solid;
    -webkit-border-radius:48px;
    border-radius:48px;
    font-size:12px;
    line-height:1.34em;
    vertical-align:bottom
}
.u-openSpeciaItem .osiDesc {
    margin-top:.75em;
    line-height:1.67em;
    -webkit-transition:.25s;
    transition:.25s
}
.u-openSpeciaItem .osiDesc:hover,
.u-openVideoItem .oviSubInfo:hover {
    color:#999
}
.u-openSpeciaItem:hover .osiImg img,
.u-openVideoItem:hover .oviImg img {
    -webkit-transform:scale(1.1);
    transform:scale(1.1);
    -webkit-transition:1s;
    transition:1s
}
.u-openVideoItem {
    width:180px;
    min-height:147px;
    margin-left:15px;
    margin-bottom:21px
}
.u-openVideoItem.z-hide {
    opacity:0;
    -webkit-transform:translateY(-20px);
    transform:translateY(-20px)
}
.u-openVideoItem .oviImg {
    -webkit-transition:.5s;
    transition:.5s;
    background-color:#e6e6e6;
    height:100px
}
.u-openVideoItem .oviImgText {
    width:100%;
    bottom:0;
    padding:0 .5em;
    line-height:1.5em;
    background-color:rgba(0,0,0,.6)
}
.u-openVideoItem .oviTitle {
    height:1.25em;
    overflow:hidden;
    margin-top:.65em;
    font-size:14px;
    line-height:1.25em;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-transition:.25s;
    transition:.25s
}
.u-openVideoItem .oviTitle.dl {
    white-space:normal;
    height:2.5em
}
.u-openVideoItem .oviTitle.ml {
    overflow:visible;
    white-space:normal
}
.u-openVideoItem .oviSubtitle {
    display:inline-block;
    padding:0 .5em;
    color:#09924b;
    border:1px solid;
    -webkit-border-radius:48px;
    border-radius:48px;
    font-size:12px;
    line-height:1.34em;
    vertical-align:bottom
}
.CourseListItem-tag:first-child::before,
.CourseListItem-tag:last-child::after,
.u-openVideoItem .oviSubtitle.hide {
    display:none
}
.u-openVideoItem .oviSubInfo {
    margin-top:.35em;
    white-space:nowrap
}
.u-openVideoItem .oviViewCount {
    padding-left:18px;
    background:url(https://open-image.ws.126.net/open-pc/images/viewCountIcon-5e3ced805d.png) 2px center no-repeat
}
.u-openVideoItem.topItem {
    width:375px;
    margin-left:0
}
.u-openVideoItem.topItem .oviImg {
    height:268px
}
.u-openVideoItem.topItem .oviImgText {
    font-size:14px
}
.u-openVideoItem.topItem .oviTitle {
    font-size:16px
}
.m-openEC {
    margin-bottom:30px
}
.m-openGYLList {
    padding-bottom:40px
}
.m-openGYLList .u-openVideoItem {
    height:125px
}
.m-indexDetail {
    background-color:#f0f0f0;
    padding-top:48px
}
.m-categoryIndex {
    width:180px;
    height:315px;
    margin-right:15px;
    margin-bottom:55px;
    padding-top:28px;
    background:#888;
    -webkit-transition:.5s;
    transition:.5s
}
.m-categoryIndex.short {
    height:295px
}
.m-categoryIndex a {
    color:#fff
}
.m-categoryIndex .ciTitle {
    font-size:24px;
    font-weight:400;
    line-height:1.25em;
    text-align:center
}
.m-categoryIndex .ciList {
    margin-top:20px;
    padding:0 24px 0 14px;
    font-size:14px
}
.m-categoryIndex .ciList.shortList {
    padding:0 12px 0 26px
}
.m-categoryIndex .ciList.shortList+.ciAll {
    margin-left:38px
}
.m-categoryIndex .ciList>li {
    display:inline-block;
    margin-bottom:1.5em;
    margin-left:12px;
    width:4em;
    font-size:14px;
    text-align:left;
    white-space:nowrap
}
.m-categoryIndex .ciList.centerlist li {
    text-align:center;
    display:block;
    width:auto
}
.m-categoryIndex .ciAll {
    display:block;
    margin-left:26px
}
.m-categoryIndex .ciAll.center {
    text-align:center;
    margin-right:24px
}
.m-ted {
    background-color:#970700
}
.m-ted:hover {
    background-color:#800a08
}
.m-gjgkk {
    background-color:#257397
}
.m-gjgkk:hover {
    background-color:#145978
}
.m-bbc {
    background-color:#4aa4fc
}
.m-bbc:hover {
    background-color:#4095e8
}
.m-yanj {
    background-color:#20673f
}
.m-yanj:hover {
    background-color:#185c37
}
.m-zggkk {
    background-color:#7e512a
}
.m-zggkk:hover {
    background-color:#62320e
}
.m-kehan {
    background-color:#7d9519
}
.m-kehan:hover {
    background-color:#657b19
}
.m-cloud {
    background-color:#10ae58
}
.m-cloud:hover {
    background-color:#118a48
}
.m-coursera {
    background-color:#0064b7
}
.m-coursera:hover {
    background-color:#0a5191
}
.m-indexb {
    background-color:#f0f0f0
}
.u-votebtn {
    margin-bottom:35px;
    background-color:#fff;
    text-align:center;
    line-height:48px;
    font-size:14px
}
.u-stitle h2 {
    line-height:1.2em
}
.u-stitle span {
    padding:6px 0 0 10px
}
.m-indexb .area {
    color:#666;
    padding:33px 0 16px;
    border-bottom:1px solid #ddd
}
.m-indexb .areacon {
    line-height:20px;
    font-size:11px;
    padding-top:5px;
    overflow:hidden
}
.m-indexb .areacon p {
    padding-top:10px;
    text-indent:2em
}
.m-indexb .itemwrap {
    margin-right:-46px;
    padding-top:10px
}
.m-indexb .item {
    display:block;
    margin:0 45px 20px 0;
    float:left
}
.m-indexb .item,
.m-indexb .item img {
    width:80px;
    height:50px
}
.m-indexb .lastarea {
    border:none;
    padding-bottom:30px
}
.homeadv:before {
    content:'广告';
    display:inline-block;
    width:30px;
    height:15px;
    line-height:15px;
    font-size:10px;
    vertical-align:bottom;
    color:#4a4a4a;
    text-align:center;
    opacity:.7;
    border:1px solid #4a4a4a;
    -webkit-border-radius:4px;
    border-radius:4px;
    margin-right:5px
}
.openspecial-wrap {
    float:left
}
.app-download-wrap {
    float:right;
    width:219px;
    margin-top:40px
}
.app-download-wrap .qrcode-image {
    width:100%
}
@media screen and (min-width:1200px) {
    .u-openSpeciaItem {
        width:270px;
        margin-left:33px;
        -webkit-transition:.5s;
        transition:.5s
    }
    .u-openSpeciaItem .osiImg {
        height:150px
    }
    .u-openSpeciaItem .osiSubtitle {
        display:inline-block
    }
    .u-openSpeciaItem .osiSubtitle.hide {
        display:none
    }
    .u-openVideoItem {
        margin-left:20px;
        -webkit-transition:.5s;
        transition:.5s
    }
    .u-openVideoItem.topItem {
        width:380px;
        margin-left:0
    }
    .u-openVideoItem.topItem .oviImg {
        height:268px
    }
    .u-openVideoItem.topItem .oviImgText {
        font-size:14px
    }
    .u-openVideoItem.topItem .oviTitle {
        font-size:16px
    }
    .m-categoryIndex {
        margin-right:20px
    }
    .m-indexb .itemwrap {
        margin-right:-42px
    }
    .m-indexb .item {
        margin:0 42px 20px 0
    }
    .app-download-wrap {
        width:270px;
        margin-top:30px
    }
}
.home-nav-appdownload-btn {
    position:relative
}
.home-nav-appdownload-img {
    width:160px
}
.home-nav-appdownload-hint {
    margin:10px;
    color:#000;
    text-align:center
}
.home-nav-appdownload-btn:hover .home-nav-appdownload {
    visibility:visible;
    opacity:1
}
.home-nav-appdownload {
    position:absolute;
    top:40px;
    right:0;
    background:#fff;
    visibility:hidden;
    -webkit-transition:opacity .2s;
    transition:opacity .2s;
    opacity:0
}
.home-nav-appdownload-imgwrap {
    margin:10px
}
.home-pay-list {
    display:none;
    margin:0 0 0 -33px;
    -webkit-animation:.5s fadeIn;
    animation:.5s fadeIn;
    min-height:358px;
    font-family:'microsoft yahei',sans-serif
}
@-webkit-keyframes fadeIn {
    from {
        opacity:0
    }
}
@keyframes fadeIn {
    from {
        opacity:0
    }
}
.home-pay-list-item {
    display:inline-block;
    width:270px;
    height:284px;
    margin:0 0 24px 33px;
    background-color:#fff;
    -webkit-transition:.25s;
    transition:.25s;
    -webkit-box-shadow:0 2px 5px rgba(0,0,0,.01);
    box-shadow:0 2px 5px rgba(0,0,0,.01)
}
.home-pay-list-item:hover {
    -webkit-box-shadow:0 2px 10px rgba(0,0,0,.25);
    box-shadow:0 2px 10px rgba(0,0,0,.25)
}
.CourseListItem-listItem:hover .CourseListItem-img,
.home-pay-list-item:hover img {
    -webkit-transition:1.5s;
    transition:1.5s;
    -webkit-transform:scale(1.1);
    transform:scale(1.1)
}
.home-pay-cover {
    position:relative;
    background:center/cover no-repeat #eee;
    -webkit-background-size:cover;
    width:100%;
    height:150px;
    overflow:hidden
}
.home-pay-coupon,
.home-pay-status {
    position:absolute;
    padding:0 .5em;
    color:#fff;
    font-size:12px;
    line-height:22px
}
.home-pay-cover img {
    width:100%;
    height:100%;
    object-fit:cover;
    -webkit-transition:.5s cubic-bezier(0,.6,.3,1);
    transition:.5s cubic-bezier(0,.6,.3,1)
}
.home-pay-status {
    bottom:0;
    right:0;
    text-align:center;
    background-color:rgba(0,0,0,.5)
}
.home-pay-coupon {
    top:0;
    background-color:#ff4b36
}
.CourseListItem-cover,
.CourseListItem-listItem,
.home-pay-subtitle {
    position:relative;
    overflow:hidden
}
.home-pay-coupon.combo,
.home-pay-page-dot.current {
    background-color:#09924b
}
.home-pay-info {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height:96px;
    padding:14px 10px 0;
    overflow:hidden;
    font-size:14px;
    color:#999;
    line-height:1.75
}
.home-pay-title {
    margin-bottom:10px;
    font-size:18px;
    color:#333;
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis
}
.home-pay-subtitle {
    margin-bottom:.5em;
    line-height:1;
    white-space:nowrap;
    text-overflow:ellipsis
}
.home-pay-price {
    padding:0 10px;
    color:red;
    font-size:24px;
    font-weight:500;
    line-height:1
}
.home-pay-price-ori {
    margin-left:.5em;
    color:#999;
    font-size:14px;
    font-weight:400;
    text-decoration:line-through
}
@media screen and (max-width:1199px) {
    .home-pay-list {
        min-height:280px;
        margin:0 0 0 -28px
    }
    .home-pay-list-item {
        width:219px;
        height:230px;
        margin:0 0 18px 28px
    }
    .home-pay-info {
        height:80px
    }
    .home-pay-cover {
        height:122px
    }
    .home-pay-title {
        font-size:14px;
        margin-bottom:6px
    }
    .home-pay-author {
        display:none
    }
    .home-pay-subtitle {
        height:1.5em
    }
    .home-pay-price {
        font-size:18px
    }
    .home-pay-price-ori {
        font-size:12px
    }
}
.home-pay-page {
    text-align:center
}
.home-pay-page-dot {
    display:inline-block;
    width:12px;
    height:12px;
    margin:0 6px;
    -webkit-border-radius:100%;
    border-radius:100%;
    background-color:#999;
    cursor:pointer;
    -webkit-transition:.5s;
    transition:.5s
}
.home-activity-discount,
.open-pay {
    display:none;
    padding-top:30px
}
.m-slidebox .imgbox .txt .tag.tag-13pay {
    display:inline-block;
    padding:0 .75em;
    -webkit-border-radius:4px;
    border-radius:4px;
    background:#2e9057;
    font-size:14px;
    line-height:25px;
    white-space:nowrap;
    text-shadow:none
}
.m-slidebox .imgbox .txt .tag.tag-13pay:before {
    content:'付费'
}
.home-activity-discount {
    font-family:'Microsoft YaHei UI','Microsoft YaHei',Helvetica,Arial,sans-serif
}
.home-activity-discount * {
    -webkit-box-sizing:content-box;
    box-sizing:content-box
}
.home-activity-discount a:nth-of-type(4n) {
    margin-right:0
}
.CourseListItem-listItem {
    display:inline-block;
    height:295px;
    width:270px;
    margin:0 16px 24px;
    font-size:14px;
    background-color:#fff;
    vertical-align:top;
    -webkit-transition:.5s;
    transition:.5s;
    -webkit-transform-origin:bottom;
    transform-origin:bottom;
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,.08);
    box-shadow:0 2px 2px rgba(0,0,0,.08);
    -webkit-animation:.5s itemIn;
    animation:.5s itemIn
}
.CourseListItem-listItem:hover {
    -webkit-box-shadow:0 4px 20px rgba(0,0,0,.2);
    box-shadow:0 4px 20px rgba(0,0,0,.2);
    -webkit-transition:.25s;
    transition:.25s
}
.CourseListItem-listItem:hover .CourseListItem-body {
    -webkit-transition:.25s;
    transition:.25s
}
.CourseListItem-listItem:hover .CourseListItem-img img {
    -webkit-transition:1s;
    transition:1s;
    -webkit-filter:brightness(1.5) saturate(1.5);
    filter:brightness(1.5) saturate(1.5);
    opacity:0
}
@-webkit-keyframes itemIn {
    from {
        opacity:0
    }
}
@keyframes itemIn {
    from {
        opacity:0
    }
}
.CourseListItem-body {
    -webkit-transform-origin:top;
    transform-origin:top;
    -webkit-transition:.5s;
    transition:.5s
}
.CourseListItem-cover {
    height:150px;
    background:center/cover no-repeat #f8f8f8;
    -webkit-background-size:cover
}
.CourseListItem-img {
    height:100%;
    background:center/cover no-repeat;
    -webkit-background-size:cover;
    -webkit-transition:.5s cubic-bezier(0,.6,.3,1);
    transition:.5s cubic-bezier(0,.6,.3,1);
    -webkit-transform-origin:bottom;
    transform-origin:bottom
}
.CourseListItem-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
    opacity:1
}
.CourseListItem-tags {
    position:absolute;
    top:0;
    left:0;
    font-size:12px;
    line-height:22px
}
.CourseListItem-tag {
    float:left;
    position:relative;
    margin-right:13px;
    padding:0 .25em;
    background-color:#666;
    border-color:#666;
    color:#fff
}
.CourseListItem-tag::after,
.CourseListItem-tag::before {
    content:'';
    position:absolute;
    top:0;
    border:11px solid transparent;
    border-bottom-color:inherit;
    border-left-color:inherit;
    -webkit-transform-origin:left;
    transform-origin:left;
    -webkit-transform:scaleX(.5);
    transform:scaleX(.5)
}
.CourseListItem-tag::before {
    left:0;
    -webkit-transform:rotate(180deg) scaleX(.5);
    transform:rotate(180deg) scaleX(.5)
}
.CourseListItem-tag::after {
    left:100%
}
.CourseListItem-tag:first-child {
    padding-left:.5em
}
.CourseListItem-tag:last-child {
    padding-right:.5em
}
.CourseListItem-tagOnSale {
    background-color:#ff4b36;
    border-color:#ff4b36
}
.CourseListItem-tagCombo {
    background-color:#09924b;
    border-color:#09924b
}
.CourseListItem-tagMain {
    background-color:#d5b45c;
    border-color:#d5b45c
}
.CourseListItem-status {
    position:absolute;
    bottom:0;
    right:0;
    padding:0 .5em;
    background-color:rgba(0,0,0,.5);
    color:#fff;
    font-size:12px;
    line-height:22px
}
.CourseListItem-info {
    height:72px;
    padding:14px 10px 0;
    margin-bottom:20px;
    overflow:hidden
}
.CourseListItem-title {
    max-height:42px;
    font-size:18px;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left
}
.CourseListItem-text-ellipsis-line-2 {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    text-overflow:ellipsis
}
.CourseListItem-subtitle {
    position:relative;
    margin-top:.75em;
    overflow:hidden;
    color:#999;
    font-size:14px;
    white-space:nowrap;
    text-overflow:ellipsis
}
.CourseListItem-price {
    padding:0 .25em;
    color:red;
    font-size:24px;
    font-weight:500;
    line-height:1
}
.CourseListItem-oriPrice {
    color:#999;
    font-size:14px;
    font-weight:400;
    text-decoration:line-through
}
.CourseListItem-hasBuy {
    padding:1em 10px 0;
    text-align:right;
    color:#666;
    -webkit-animation:.5s fadeIn;
    animation:.5s fadeIn
}
.CourseListItem-interest {
    float:right;
    padding:.4em 10px 0;
    color:#999;
    text-align:right;
    font-size:12px;
    font-weight:400;
    line-height:2
}
.CourseListItem-interestNum {
    color:#666
}
.home-block {
    margin-top:47px
}
.dh-tabs {
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -webkit-flex-direction:row;
    flex-direction:row;
    height:40px;
    -webkit-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-pack:start;
    -webkit-justify-content:start;
    justify-content:start;
    -webkit-box-align:center;
    -webkit-align-items:center;
    align-items:center;
    padding:12px 0;
    user-select:none
}
.dh-tabs .dh-title {
    font-size:24px;
    color:#333;
    line-height:30px
}
.dh-tabs .dh-link {
    display:block;
    margin-left:16px;
    padding:0 12px;
    line-height:24px;
    -webkit-border-radius:4px;
    border-radius:4px;
    background:#e5e5ea;
    color:#333;
    font-size:14px
}
.dh-tabs .dh-link:hover {
    background:rgba(32,214,116,.1);
    -webkit-box-shadow:0 0 0 1px #20d674 inset;
    box-shadow:0 0 0 1px #20d674 inset;
    color:#20d674;
    font-weight:700
}
.thumimg-tag {
    position:absolute;
    left:0;
    top:0;
    color:#fff;
    user-select:none
}
.thumimg-tag.top1 {
    height:32px;
    line-height:32px;
    -webkit-border-bottom-right-radius:14px;
    border-bottom-right-radius:14px;
    font-size:16px;
    padding:0 12px;
    font-weight:700
}
.thumimg-tag.normal {
    height:24px;
    line-height:24px;
    font-size:14px;
    -webkit-border-bottom-right-radius:8px;
    border-bottom-right-radius:8px;
    padding:0 10px;
    font-weight:700
}
.thumimg-tag.free {
    height:28px;
    line-height:28px;
    font-size:15px;
    -webkit-border-bottom-right-radius:6px;
    border-bottom-right-radius:6px;
    padding:0 13px
}
.thumimg-tag.red {
    background:-webkit-linear-gradient(315deg,#ff6818 0,#f74343 100%);
    background:linear-gradient(135deg,#ff6818 0,#f74343 100%)
}
.thumimg-tag.orange {
    background:#ff8f25
}
.thumimg-tag.yellow {
    background:-webkit-linear-gradient(315deg,#fdbe4b 0,#e49c19 100%);
    background:linear-gradient(135deg,#fdbe4b 0,#e49c19 100%)
}
.banner-warp {
    position:relative;
    font-family:"Hiragino Sans GB","Microsoft Yahei",arial,宋体,"Helvetica Neue",Helvetica,STHeiTi,sans-serif
}
.banner-swiper {
    position:relative;
    height:344px
}
.banner-swiper>li>div {
    width:100%;
    position:absolute;
    height:344px;
    background-color:#030404
}
.baner-swiper-btns {
    position:absolute;
    width:1180px;
    height:8px;
    line-height:0;
    left:calc((100% - 1180px)/ 2);
    bottom:10px;
    text-align:center
}
.baner-swiper-btns li {
    cursor:pointer;
    display:inline-block;
    margin:2px 4px;
    width:24px;
    height:4px;
    background:rgba(255,255,255,.3);
    -webkit-border-radius:2px;
    border-radius:2px
}
.baner-swiper-btns li:hover {
    background:rgba(255,255,255,.6)
}
.baner-swiper-btns li.active,
.baner-swiper-btns li.active:hover {
    background:#20d674
}
.banner-item {
    width:868px;
    height:344px;
    position:absolute;
    overflow:hidden;
    left:calc((100% - 1180px)/ 2 + 28px)
}
.banner-item img {
    object-fit:cover
}
.banner-item-flag {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    height:24px;
    -webkit-border-radius:2px;
    border-radius:2px;
    padding:0 8px;
    border:1px solid rgba(235,235,245,.6);
    color:rgba(235,235,245,.6);
    line-height:22px;
    position:absolute;
    top:116px;
    left:0
}
.banner-item-title {
    position:absolute;
    left:0;
    top:148px;
    max-width:336px;
    font-size:28px;
    font-weight:700;
    font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
    color:#fff;
    line-height:40px;
    text-shadow:0 2px 2px rgba(0,0,0,.4)
}
.banner-login-btn,
.banner-login-desc,
.banner-login-out {
    font-size:14px;
    position:absolute
}
.banner-login-card {
    width:256px;
    height:312px;
    position:absolute;
    top:16px;
    right:calc((100% - 1180px)/ 2 + 28px);
    background:#fff;
    -webkit-border-radius:8px;
    border-radius:8px;
    -webkit-user-select:none;
    user-select:none
}
.banner-login-title-img {
    left:15px;
    top:28px;
    position:absolute;
    width:227px;
    height:152px;
    background:url(https://open-image.ws.126.net/a9c4de22b25349c39eb82bdf163d96d6.png) center center/contain no-repeat
}
.banner-login-desc {
    width:100%;
    top:184px;
    height:16px;
    text-align:center;
    color:rgba(60,60,67,.6)
}
.banner-login-btn {
    bottom:41px;
    left:68px;
    width:120px;
    background:#20d674;
    -webkit-border-radius:4px;
    border-radius:4px;
    color:#fff;
    line-height:38px;
    text-align:center;
    font-weight:600;
    cursor:pointer
}
.banner-login-out {
    cursor:pointer;
    width:72px;
    font-weight:400;
    color:rgba(60,60,67,.3);
    line-height:16px;
    right:16px;
    top:16px;
    text-align:right
}
.banner-login-avatar {
    width:88px;
    height:88px;
    position:absolute;
    top:52px;
    left:84px;
    -webkit-border-radius:44px;
    border-radius:44px;
    background:center center/cover no-repeat #fff
}
.banner-login-name,
.banner-login-subtitle {
    width:100%;
    line-height:16px;
    position:absolute;
    text-align:center
}
.banner-login-name {
    font-size:16px;
    font-weight:600;
    color:rgba(0,0,0,.86);
    top:152px
}
.banner-login-subtitle {
    font-size:14px;
    color:rgba(60,60,67,.3);
    top:176px
}
.banner-login-usercenter {
    width:112px;
    height:40px;
    -webkit-border-radius:4px;
    border-radius:4px;
    border:1px solid #20d674;
    position:absolute;
    bottom:40px;
    left:72px;
    text-align:center;
    line-height:40px;
    font-size:16px;
    color:#20d674;
    cursor:pointer
}
.fade-enter-active,
.fade-leave-active {
    -webkit-transition:opacity .6s;
    transition:opacity .6s
}
.fade-enter,
.fade-leave-to {
    opacity:0
}
